﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>WGestures QuickStart</title>

    <meta name="author" content="Ying Yuandong">

    <style>
        html, body,ul {
            margin: 0;
            padding: 0;
            background: none;
        }

        a {
            cursor: default;
        }

        body {
            background: whitesmoke;
        }

        #slides {
            display: none;
            text-align: center;
            width: 100%;
        }

        #slides>img 
        {
            width: 100%;
            height: 100%;
        }

        .slidesjs-navigation {
            top: 35%;
            position: absolute;
            background: none;
            width: 80px;
            height: 100px;
            display: block;
            z-index: 1024;
        }

        .slidesjs-previous {
            left: 0;
            background: url(img/prev-default.png);
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/prev.png") alpha(opacity=40);
        }

            .slidesjs-previous:hover {
                background: url(img/prev.png);
                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/prev.png") alpha(opacity=80);
            }

        .slidesjs-next {
            right: 0;
            background: url(img/next-default.png);
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/next.png") alpha(opacity=40);
        }

            .slidesjs-next:hover {
                background: url(img/next.png);
                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/next.png") alpha(opacity=80);
            }

        .slidesjs-pagination {
            display: inline-block;
            *display: inline; /* IE*/
            *zoom: 1; /* IE*/
            text-align: left;
            list-style: none;
            overflow: hidden;
            margin-top: 20px;
        }

        .slidesjs-pagination li {
            float: left;
            margin: 0 8px;
            width: 20px;
        }

        .slidesjs-pagination li a {
            display: block;
            width: 15px;
            height: 0;
            padding-top: 13px;
            background: url(img/pagination_.png);
            background-position: 0 0;
            float: left;
            overflow: hidden;
        }

        .slidesjs-pagination li a.active,
        .slidesjs-pagination li a:hover.active {
            background-position: 0 -13px;
        }

        .slidesjs-pagination li a:hover {
            background-position: 0 -26px;
        }

    </style>
    <!-- End SlidesJS Optional-->
</head>


<body ondragstart="return false;" onselectionstart="return false;">

    <div class="container">
        <div id="slides">
            <img src="slides/0.png">
            <img src="slides/1.png">
            <img src="slides/2.png">
            <img src="slides/3.png">
            <img src="slides/4.png">
            <img src="slides/5.png">
            <a href="#" class="slidesjs-previous slidesjs-navigation"></a>
            <a href="#" class="slidesjs-next slidesjs-navigation"></a>

        </div>

    </div>


    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.slides.min.js"></script>

    <script>
        var btnPrev;
        var btnNext;

        $(function () {
            var imgCount = $("#slides>img").length;
            btnPrev = $(".slidesjs-previous");
            btnNext = $(".slidesjs-next");

            $('#slides').slidesjs({
                width: 936,
                height: 525,
                navigation: false,
                effect: {
                    slide: {
                        speed: 300
                    }
                },
                callback: {
                    loaded: function(number) {
                        // Do something awesome!
                        // Passes start slide number
                        btnPrev.css("display", "none");

                        var pagination = $(".slidesjs-pagination");

                        var pagerWidth = parseInt(pagination.css("width"),10);
                        var windowWidth = parseInt($("#slides").css("width"), 10);

                        var center = (windowWidth - pagerWidth) >> 1;
                        pagination.css("position", "absolute");
                        pagination.css("bottom", "20px");
                        pagination.css("left", center + "px");
                    },
                    start: function(number) {
                        // Do something awesome!
                        // Passes slide number at start of animation
                    },
                    complete: function(number) {
                        // Do something awesome!
                        // Passes slide number at end of animation
                        if (number == 1) btnPrev.css("display", "none");
                        else btnPrev.css("display", "block");

                        if (number == imgCount) btnNext.css("display", "none");
                        else btnNext.css("display", "block");
                    }
                    
                }
            });

        });

        function performPrev() {
            if (btnPrev != null && btnPrev.css("display") != "none") btnPrev.click();
        }
        function performNext() {
            if (btnNext != null && btnNext.css("display") != "none") btnNext.click();
        }

    </script>

</body>
</html>
